<template lang="html">
  <div class="main-page" id="loan-page">
    <!-- 标题 -->
    <nav-bar :title="'确认支付'"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <div class="pay-container">
         <div class="pay-price">￥{{order_payment_amount}}</div>
      </div>
        <van-cell :border="border">
          <div slot="title">
            <span style="color:#999999;font-size:14px;">收款方</span>
          </div>
          <span style="color:#17273A;font-size:14px;margin-left:10px;">北京美家美货有限公司</span>
        </van-cell>
        <!-- 支付方式 -->
      <div class="withdrawal">
        <div style="color:#17273A;font-size:18px;padding:15px;background-color:#ffffff;margin-top:10px;">支付方式</div>
        <van-radio-group v-model="values">
        <van-cell-group>
          <van-cell :border="border" clickable data-name="微信支付" @click="onClick">
           <div slot="title">
            <img class="pay-icon" src="https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/wx.png" alt=""/>
            <span style="color:#333333;font-size:16px;margin-left:10px;">微信支付</span>
          </div>
            <van-radio name="微信支付" checked-color="#E91F3F"/>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
          <div class="pay-countdown">
          <img class="countdown-icon" src="https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/countdown.png" alt=""/>
          <span style="color:#333333;font-size:15px;font-weight: bold;">请在</span>
            <!-- <span class="pay-time-text">{{wxTimerHour}}</span>
            <span style="color:#E91F3F">:</span>
            <span class="pay-time-text">{{wxTimerMinute}}</span>
            <span style="color:#E91F3F">:</span>
            <span class="pay-time-text">{{wxTimerSecond}}</span> -->
          <span style="color:#333333;font-size:15px;font-weight: bold;">内完成支付</span>
          <div style="color:#666666;font-size:13px;margin-top:15px;">请尽快支付，否则订单将在支付倒计时结束后被取消</div>
        </div>
        <van-button size="large" class="v-btn" @click="nowPayment">立即支付</van-button>
      <van-toast id="van-toast" />
      <van-dialog id="van-dialog" />
      <van-dialog id="van-dialog1" />
      <van-dialog id="van-dialog2" />
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/global/nav-bar.vue'

export default {
  components: { NavBar },
  data () {
    return {
      active: 2,
      border: false,
      wxTimerList: {},
      order_id: '',
      shows: false,
      isClick: false,
      amount: '1000',
      values: '微信支付',
      showType: 'password', // 如果是密码换成'password'
      isFocus: false,
      payShow: false,
      isSuccess: false,
      pay_type: '',
      balance: '',
      order_payment_amount: '',
      ifcart: '',
      type: '',
      user: '',
      count_down: '',
      open_id: '',
      merchant_code: ''
    }
  },
  created () {
    console.log(this.$route)
    if (this.$route.query) {
      this.order_payment_amount = this.$route.query.order_payment_amount
      this.ifcart = this.$route.query.ifcart
      this.order_id = this.$route.query.orderId
      // this.type = this.$route.query.type ? this.$route.query.type: ''
      this.expire_date = this.$route.query.expire_date ? this.$route.query.expire_date : ''
      this.current_date = this.$route.query.current_date ? this.$route.query.current_date : ''
      this.merchant_code = this.$route.query.merchant_code ? this.$route.query.merchant_code : ''
    }
    this.getUserInfo()
    // if (this.$route.query.expire_date) {
    //   var timeN = new Date()
    //   var c_d = timeN.getFullYear() + '-' + (timeN.getMonth() + 1) + '-' + timeN.getDate() + ' ' + timeN.getHours() + ':' + timeN.getMinutes() + ':' + timeN.getSeconds()
    //   var time = timeDown.TimeDown(this.$route.query.current_date ? this.$route.query.current_date : c_d, this.$route.query.expire_date)
    //   console.log(c_d)
    //   console.log(time)
    //   var wxTimer = new timer({
    //     beginTime: time,
    //   })
    //   console.log(wxTimer.beginTime)
    //   wxTimer.start(this)
    // }
  },
  methods: {
    onClick (e) {
      console.log(e)
      this.values = e.currentTarget.dataset.name
      this.isClick = false
    },
    getUserInfo () { // 获取用户信息判断是否vip
      var data = {}
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'profile', data, method: 'get' }).then((resp) => { // 请求成功
          console.log(resp)
          if (resp.return_code === '0000') {
            if (resp.data) {
              this.open_id = resp.data.user_info.wx_id
            }
            console.log(this.userData)
            console.log('请求成功')
          } else {
            console.log('请求错误')
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    wxPaySuccess () { // 微信支付成功
      // var invite_id = ''
      // invite_id = wx.getStorageSync('invite_code') ? wx.getStorageSync('invite_code') : ''
      // var data = {
      //   order_id: t.data.order,
      //   invitation_code: invite_id
      // }
      // return new Promise((resolve, reject) => {
      //   Fly.post(Fly.config.baseUrl + 'pay_order_invitation_code', data).then(function (res) {
      //     if (res.return_code === '0000') {
      //       console.log('请求成功')
      //     } else {
      //       console.log('请求错误')
      //     }
      //     resolve()
      //   }).catch((error) => {
      //     console.log('请求失败', error)
      //   })
      // })
    },
    nowPayment () {
      this.isClick = true
      if (this.values === '微信支付') {
        // this.confirmPayment()
      }
    },
    onTapFocus () {
      this.isFocus = true
    },
    confirmPayment () { // 微信支付
      console.log(this.open_id, 12334)
      var data = {
        body: '美家美货-小程序商品',
        total_fee: this.order_payment_amount * 100,
        out_trade_no: this.order_id,
        openid: this.open_id,
        spbill_create_ip: ''
      }
      console.log(data)
      return new Promise((resolve, reject) => {
        this.$Axios({ url: '/pay_wechat_app', data, method: 'post' }).then((res) => {
          if (res.return_code === '0000') {
            // var data_ = res.data
            // wx.requestPayment({
            //   timeStamp: data_.timeStamp + '',
            //   nonceStr: data_.nonceStr,
            //   'package': data_.package,
            //   signType: data_.signType,
            //   paySign: data_.paySign,
            //   success: function (res) {
            //     console.log('123')
            //     console.log(res)
            //     this.isSuccess = true
            //     // wx.redirectTo({
            //     //   url: '/pages/shopping_cart/shopPay/pay?orderId=' + that.data.order_id// 去订单支付成功信息详情
            //     // })
            //     this.wxPaySuccess(this)
            //   },
            //   fail: function (res) {
            //     console.log(res)
            //     console.log('123')
            //   }
            // })
            console.log('请求成功')
          } else {
            console.log('请求错误')
          }
          resolve()
        }).catch((error) => {
          console.log('请求失败', error)
        })
      })
    }
    // gotoOrderPage () {//自定义页面跳转方法
    //   if (this.data.isSuccess === false) {
    //     if (this.data.type !== 'order-list') {
    //       wx.redirectTo({
    //         url: '/pages/personal_center/order-all/order-all',
    //       })
    //     }
    //   }
    // }
  }
}
</script>
<style lang="scss" scoped>
.pay-container{
  background-color: #ffffff;
  font-weight:bold;
  text-align: center;
  padding: 45px 0;
  border-bottom: 1px solid #EDEFF2;
}
.pay-price{
  color:#E91F3F;
  font-size: 30px;
}
.pay-time-text{
  color:#E91F3F;
  font-size: 16px;
  font-weight: bold;
}
.popup-height1{
  top:30%!important;
  width:90%!important;
  height: 190px!important;
  background-color: #F9F9F9!important;
  text-align:center;
}
.coupons-title-text{
  color: #333333;
  font-size: 22px;
}
.v-btn{
  position: fixed!important;
  left:0;
  right:0;
  bottom: 0;
  color: #FFFFFF!important;
  background-color: #E91F3F!important;
  border:0!important;
}

.close{
  position:absolute!important;
  right:20px;
  top:20px;
}
.van-popup--safe{padding-bottom:0!important}.render-wrap{padding:20px 0;}.render-input{width:96rpx;height:96rpx;border:0.5px solid #CBCBCB;border-left:none;box-sizing:border-box;text-align:center}.render-input:first-child{border-left:0.5px solid #eee}.hidden-input{width:0;height:0}
.countdown-icon{
  position:relative;
  top:2px;
  left:-3px;
  animation: spin 1s ease infinite;
  width:15px;
  height:15px;
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
  }
  .pay-countdown{
    text-align: center;
    padding: 25px 0;
  }
  .pay-icon{
    position:relative;
    top:4px;
    left:0;
    display:inline-block;
    width:20px;
    height:20px;
    margin:5px 0 0 0;
  }
  // .van-radio__control{
  //   border-color: #E5E5E5!important;
  // }
  // .van-radio__input{
  //   border-color: #E5E5E5!important;
  // }
</style>
